<template>
  <div id="register">
    <transition
        name="animate__animated "
        enter-active-class="animate__bounceInDown"
    >
      <div class="user_register" v-if="isShow">
        <div class="title">注册</div>
        <el-form
            :model="userMessage"
            status-icon
            :rules="rules"
            ref="userMessage"
        >
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="userMessage.phone" :maxlength="11"></el-input>
          </el-form-item>
          <el-form-item label="账号" prop="username">
            <el-input
                v-model="userMessage.username"
                :maxlength="10"
                placeholder="   账号为2-10位, 不可修改！"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
                type="password"
                v-model="userMessage.password"
                autocomplete="off"
                :maxlength="16"
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="confirmPass">
            <el-input
                type="password"
                v-model="userMessage.confirmPass"
                autocomplete="off"
                :maxlength="16"
            ></el-input>
          </el-form-item>
          <div class="bottom">
            <el-button type="primary" @click="submitForm" class="submit">
              提交
            </el-button>
          </div>
        </el-form>
      </div>
    </transition>
  </div>
</template>

<script>
import { setUser } from '@/utils/space.js'

export default {
  name: 'Register',
  data() {
    return {
      isShow: false,  //登录框开局隐藏
      allUsers: [],  //存储所有用户信息
      userMessage: {  //用户数据对象
        phone: '',
        username: '',
        password: '',
        confirmPass: '', //确认密码
      },
      rules: {  //表单验证规则
        phone: [
          { validator: this.checkPhone, trigger: 'blur', }
        ],
        username: [
          { validator: this.checkName, trigger: 'blur', }
        ],
        password: [
          { validator: this.checkPassword, trigger: 'blur' }
        ],
        confirmPass: [
          { validator: this.checkConfirmPass, trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    //提交表单
    submitForm() {
      this.$refs.userMessage.validate(async (valid) => {
        if (valid) {
          await setUser(this.userMessage).then(response => {
                console.log(response)
                if (response.data.code) {
                  this.$message.success('注册' + response.data.msg)
                  this.$router.push('/home/space')
                  this.$store.commit('changeType', 'space')
                } else {
                  this.$message.warning(response.data.msg)
                }
              },
              error => { console.log(error); })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    // //表单验证规则
    checkPhone(rule, value, callback) {
      if (!value) {
        callback(new Error('手机号不能为空'));
      }
      else if (!/^1[3,4,5,7,8]\d{9}$/.test(value)) {
        callback(new Error('请输入正确的手机号'));
      }
      else {
        callback()
      }
    },
    checkName(rule, value, callback) {
      if (!value) {
        callback(new Error('账号不能为空'));
      }
      else if (!/^[^\s]*$/.test(value)) {
        callback(new Error('不能输入空格'))
      }
      else if (!/^[A-Za-z0-9]+$/.test(value)) {
        callback(new Error('账号必须是英文 / 数字 / 英文数字的组合 '))
      }
      else if (!/^\w{2,10}$/.test(value)) {
        callback(new Error('账号必须是2 - 10位'))
      }
      else {
        callback()
      }
    },
    checkPassword(rule, value, callback) {
      if (value === '') {
        callback(new Error('请输入密码'));
      }
      else if (!/^[^\s]*$/.test(value)) {
        callback(new Error('不能输入空格'));
      }
      else if (!/^[A-Za-z0-9]+$/.test(value)) {
        callback(new Error('密码必须是英文 / 数字 / 英文数字的组合 '))
      }
      else if (!/^\w{6,16}$/.test(value)) {
        callback(new Error('密码必须是6 - 16位'))
      }
      else {
        callback()
      }
    },
    checkConfirmPass(rule, value, callback) {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.userMessage.password) {
        callback(new Error('密码不一致'))
      } else {
        callback()
      }
    }
  },
  mounted() {
    this.isShow = true
  }
}
</script>

<style scoped>
#register {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background-color: #2f3136;
}

.user_register {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 30%;
  padding: 10px 20px;
  border-radius: 15px;
  box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.7);
  background-color: #202225;
  color: #fff;
}

.user_register .title {
  flex: 1;
  font-size: 24px;
  text-align: center;
}

.user_register .bottom {
  display: flex;
  justify-content: right;
}

.user_register /deep/ .el-form-item__label {
  color: #b9bbbe;
}

.user_register /deep/ .el-input__inner {
  color: #b9bbbe;
  background-color: #2f3136;
}
/* 动画样式 */
</style>

